<template name="manyicon">
	<view>
		<view class="flex p-l-r3 fixed fixed-top bg-color search-h align-center font-size " :class="{'godds-bg':goods}">
			<view class="arrow-size">
				<image src="/static/images/user.png" class="head-icon" v-if="user" @tap="clickLeftUser"></image>
				<image src="/static/images/return.png" class="return" v-if="returnButton" @tap="clickLeftReturn"></image>
			</view>
			<view class="flex justify-content title align-center">{{headTitle}}<image src="/static/images/glide.png" class="glide ml-1" v-if="glide" @top="clickGlide"></image></view>
			<view class="right flex align-center">
				<view class="position-r flex align-center" v-if="news" @tap="clickRightNews">
					<image src="/static/images/news2x.png" class="sao" :class="{'m-r4':pictureStyle}"></image>
					<text class="red-dot border-r1" v-if="newsTips"></text>
				</view>
				<image src="/static/images/sao2x.png" class="sao" v-if="sao" @tap="clickRightSao"></image>
				<image src="/static/images/newsy.png" class="newsy" v-if="newsy" @tap="clickRightNewsy"></image>
				<image src="/static/images/code.png" class="sao" v-if="code" @tap="clickRightCode"></image>
				<text class="fs-2" @tap="onClickWords">{{rightWords}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"manyicon",
		props:{
			headTitle:{
				type:String,
				value : '',
			},
			user:{
				type:Boolean,
				default: false
			},
			returnButton:{
				type:Boolean,
				default: false
			},
			glide:{
				type:Boolean,
				default: false
			},
			news:{
				type:Boolean,
				default: false
			},
			sao:{
				type:Boolean,
				default: false
			},
			newsy:{
				type:Boolean,
				default: false
			},
			code:{
				type:Boolean,
				default: false
			},
			rightWords:{
				type:String,
				value : '',
			},
			goods:{
				type:Boolean,
				default: false
			},
			newsTips:{
				type:Boolean,
				default: false
			},
			pictureStyle:{
				type:Boolean,
				default: true
			}
		},
		methods:{
			clickLeftUser() {
				this.$emit("clickLeftUser");
			},
			clickLeftReturn(){
				this.$emit("clickLeftReturn");
			},
			clickGlide(){
				this.$emit("clickGlide");
			},
			clickRightNews(){
				this.$emit("clickRightNews");
			},
			clickRightSao(){
				this.$emit("clickRightSao");
			},
			clickRightNewsy(){
				this.$emit("clickRightNewsy");
			},
			clickRightCode(){
				this.$emit("clickRightCode");
			},
			onClickWords(){
				this.$emit("onClickWords");
			}
			
		}
	}
</script>

<style scoped>
.sao-v{width: 60rpx;}
.head-icon{width: 48rpx;height: 48rpx;}
.glide{width: 24rpx;height: 12rpx;}
.return{width: 20rpx;height: 36rpx;}
.sao{width: 41rpx;height: 41rpx;}
.newsy{width: 45rpx;height: 45rpx;}
.arrow-size{width: 30%;line-height: 1;}
.title{width: 40%;font-size: 38rpx;}
.right{width: 30%;display:flex;justify-content:flex-end;font-size: 36rpx;}
.red-dot{position: absolute;top: -7rpx;left: 30rpx; width: 14rpx;height: 14rpx;background-color: #FF4141;}
.godds-bg{background-color:transparent;}
</style>
